export default {
    data() {
        return {
            visibleSize: 0,
            offsetting: 0,
            tableHeight: 500,
            itemHeight: 28,
            virtual: true,
            start: 0,
            end: -1,
            id: '',
            currentFrame: null,//缓存当前数据引用，防止重复渲染
        }

    },
    computed: {
        data() {
            // 修改el-table加载数据逻辑
            if (this.virtual) {
                if(this.end<this.start){
                    return [];
                }
                if (this.currentFrame && this.currentFrame.start == this.start && this.currentFrame.end == this.end) {
                    //规避dom重新生成相同数据数组引用不同重新渲染不正确bug
                    return this.currentFrame.dataList;
                }
                //发送事件通知当前浏览数据范围
                this.$parent.$emit("virtual-change", {start: this.start, end: this.end});
                var dataList = this.table.tableData.slice(this.start, this.end);
                this.currentFrame = {start: this.start, end: this.end, dataList: dataList};
                return dataList;
            } else {
                return this.table.tableData;
            }
        },
    },
    watch: {
        'table.tableData'(value) {
            if (this.virtual) {
                this.handleVirtualTable(value)
            }
        },
        'table.bodyHeight'(value) {
            if (this.virtual) {
                this.handleVirtualTable(this.table.tableData);
            }
        },
    },
    beforeDestroy() {
        this.handleScroll = null
    },
    created() {

        this.virtual = this.$parent.$attrs.virtual
        if (!this.virtual) {
            return;
        }

        this.handleVirtualTable(this.table.tableData)
    },
    methods: {
        handleVirtualTable(data) {
            // 开启虚拟列表需要固定列表高度，默认500
            if (this.$parent.maxHeight && this.$parent.maxHeight > 0) {
                //附加两行数据高度，使渲染效果看起来更自然
                this.tableHeight = this.$parent.maxHeight + this.itemHeight * 2;
            }

            this.itemHeight = this.$parent.$attrs.itemHeight || 28
            this.id = this.$parent.$attrs.id;
            this.$nextTick(() => {
                let
                    virtualDiv = document.querySelector('#' + this.getScrollVirtualDivId()),
                    tableBody = document.querySelector('#' + this.id + ' .el-table__body'),
                    scrollContainer = document.querySelector('#' + this.id + ' .el-table__body-wrapper');

                if(!scrollContainer) {
                    return;
                }
                if(this.start<=0) {
                    scrollContainer.scrollTop = 0
                }
                scrollContainer.style.overflow = 'auto'
                scrollContainer.style.height = this.tableHeight + 'px';
                scrollContainer.addEventListener('scroll', this.handleScroll, false)

                let fixedScrollContainer = document.querySelector('#' + this.id + ' .el-table__fixed-body-wrapper');
                if (fixedScrollContainer) {
                    //左侧固定列与右侧高度保持一致
                    fixedScrollContainer.style.height = this.tableHeight + 'px';
                }
                // 虚拟滚动条
                if (!virtualDiv) {
                    virtualDiv = document.createElement('div')
                    virtualDiv.id = this.getScrollVirtualDivId();
                    // virtualDiv.style.height = `${data.length * this.itemHeight}px`
                    scrollContainer.appendChild(virtualDiv)
                }
                virtualDiv.style.height = `${data.length * this.itemHeight}px`


                // 脱离虚拟列表 避免影响高度
                Object.assign(tableBody.style, {
                    position: 'absolute',
                    left: 0,
                    top: 0,
                })

                this.visibleSize = Math.ceil(
                    this.tableHeight / this.itemHeight
                );
                this.end = this.start + this.visibleSize;
            })
        },
        handleScroll(event) {
            let scrollTop = event.target.scrollTop
            // console.log('scrollTop:'+scrollTop)
            this.start = Math.floor(scrollTop / this.itemHeight)
            this.end = this.start + this.visibleSize;
            this.offsetting = scrollTop - (scrollTop % this.itemHeight)
            document.querySelector('#' + this.id +
                ' .el-table__body'
            ).style.transform = `translateY(${this.offsetting}px)`;
            const left = document.querySelector('#' + this.id + ' .el-table__fixed-body-wrapper .el-table__body');
            if (left) {
                //同步左侧固定列滚动
                left.style.transform = `translateY(${this.offsetting}px)`;
            }
        },
        getScrollVirtualDivId() {
            //虚拟滚动条id，加id标识，防止同一页面多个table冲突
            return "virtualDiv_" + this.id;
        }
    }
}